<template>
  <page-scroll :footer="true">
    <template #bg>
      <div class="bg"></div>
    </template>
    <template #header>
      <div class="head">

      </div>
    </template>
    <template #content>


      <div class="container">
        <ul class="box1 wrap bet">
          <li class="title-tg">{{ $t('page1.推广') }}</li>
          <li class="itemBox rel">
            <div class="title-1">
              {{ $t('page3.doc59') }}
            </div>
            <div class="am">
              <span>{{ common.decal2(teamData.incomeAmount) }}</span> USDT
            </div>
          </li>
          <li class="itemBox rel">
            <div class="title-1">
              {{ $t('new.doc1') }}
            </div>
            <div class="am">
              <span>{{ common.decal2(teamData.todayIncome) }}</span> USDT
            </div>
          </li>
        </ul>
        <div class="shouyi-wrapper">
          <div class="syfx">{{ $t('page.doc64') }}</div>
          <img src="@/assets/images/promote/fx.png" alt="">
          <div class="total_revenue">
            <div class="name">{{ $t('page.doc72') }}</div>
            <div class="value">
              {{
                (parseFloat(myChartValue1 ? myChartValue1 : 0) +
                  parseFloat(myChartValue2 ? myChartValue2 : 0) +
                  parseFloat(myChartValue3 ? myChartValue3 : 0)) | Svalues
              }}
            </div>
          </div>
          <div class="data-wrapper">
            <div class="mflex items-center">
              <div class="b b1"></div>
              <div class="mflex items-center">
                <div>{{ $t('new.doc2') }}</div>
                <div class="value v1">{{ myChartValue1 ? common.decal2(myChartValue1) : 0 }}</div>
              </div>
            </div>
            <div class="mflex items-center">
              <div class="b b2"></div>
              <div class="mflex items-center">
                <div>{{ $t('new.doc3') }}</div>
                <div class="value v2">{{ myChartValue2 ? common.decal2(myChartValue2) : 0 }}</div>
              </div>
            </div>
            <div class="mflex items-center">
              <div class="b b3"></div>
              <div class="mflex items-center">
                <div>{{ $t('new.doc28') }}</div>
                <div class="value v3">{{ myChartValue3 ? common.decal2(myChartValue3) : 0 }}</div>
              </div>
            </div>
          </div>
        </div>

        <div @click="path_url('/promote/team')" class="btn_box submit">{{ $t('new.doc4') }}</div>

        <div class="team-wrapper">
          <div class="title">{{ $t('page1.团队成员') }}</div>
          <img src="@/assets/images/promote/team.png" alt="">
          <div class="data-wrapper">
            <div class="data-item">
              <div class="t">{{ $t('new.doc53') }}</div>
              <div class="value" style="color: #da67e0">{{ teamData1.todayCount ||0 }}</div>
            </div>
            <div class="data-item">
              <div class="t">{{ $t('new.doc48') }}</div>
              <div class="value" style="color: #ffd642">{{ teamData1.preWeekCount ||0 }}</div>
            </div>
            <div class="data-item">
              <div class="t">{{ $t('new.doc49') }}</div>
              <div class="value" style="color: #45ff82">{{ teamData1.thisWeekCount ||0 }}</div>
            </div>
            <div class="data-item">
              <div class="t">{{ $t('page1.总成员') }}</div>
              <div class="value" style="color: #00f0ff">{{ teamData1.teamCount ||0 }}</div>
            </div>
          </div>
        </div>
        <div class="invite-wrapper" @click="path_url('/my/invite')">
          <img src="@/assets/images/promote/banner.png" alt="">
          <div class="content">
            <div class="t1">{{ $t('page1.邀请好友') }}</div>
            <div class="t2">{{ $t('page1.看电影开始赚钱') }}</div>
            <div class="yq-button">{{ $t('page1.去邀请') }}</div>
          </div>
        </div>
        <div class="box3">
          <div class="">
            <div class="it team-it" v-for="(item,k) in generationsData" :key="k">
              <div class="tit" v-if="k == 0">
                <img src="@/assets/images/promote/f1.png" alt="">
                {{ $t('new.doc9') }}
              </div>
              <div class="tit cname" v-if="k == 1">
                <img src="@/assets/images/promote/f2.png" alt="">
                {{ $t('new.doc10') }}
              </div>
              <div class="tit cname" v-if="k == 2">
                <img src="@/assets/images/promote/f3.png" alt="">
                {{ $t('new.doc11') }}
              </div>
              <ul class="flex">
                <li>
                  <div class="s">{{ item.teamCount }}</div>
                  <div class="n">{{ $t('new.doc8') }}</div>
                </li>
                <li>
                  <div class="s">{{ common.decal2(item.incomeAmount) }}</div>
                  <div class="n">{{ $t('new.doc7') }}</div>
                </li>
                <li>
                  <div class="s">{{ common.decal2(item.todayIncome) }}</div>
                  <div class="n">{{ $t('new.doc6') }}</div>
                </li>
              </ul>
            </div>


          </div>
        </div>

      </div>


    </template>
    <template #footer>
      <glFooter :activeTitle="activeTitle"></glFooter>

    </template>
  </page-scroll>
</template>
<script>

export default {
  data() {
    return {
      activeTitle: "promote",
      teamData: [],
      data1: [],
      generationsData: [],
      teamData1: [],
      momoShow: false,
      showPopover: false,
      actions: [{text: '选项一'}],
      myChartValue1: '',
      myChartValue2: '',
      myChartValue3: '',

    };
  },

  mounted() {
    this.teamInfo()
    this.teamInfo1()
    //this.getIncome()
    this.getGenerations()
  },
  filters: {
    Svalues(value) {
      if (value) {
        return Number(value.toString().match(/^\d+(?:\.\d{0,2})?/));
      }
      return 0
    }
  },
  methods: {
    getGenerations() {
      this.$post(this.URL.income.generations, {
        generations: 6
      }).then((res) => {
        if (res.code == 0) {
          // this.generationsData = res.data
          let data = res.data;
          let arr = [];
          data.map((item, index) => {
            if (index < 3) {
              arr.push(item);
            }
          })
          this.generationsData = arr;
        }
      });
    },

    getIncome() {
      this.$post(this.URL.income.data, {
        days: this.days
      }).then((res) => {
        if (res.code == 0) {
          let arr = [
            // {name:this.$t('new.doc2'),value:res.data.scoreIncome}, // 评分收益
            // {name:this.$t('page.doc75'),value:res.data.recommendIncome}, // 推荐收益
            // {name:this.$t('page3.doc53'),value:res.data.financialIncome}, // 理财收益

            {name: this.$t('new.doc2'), value: res.data.scoreIncome}, // 评分收益 观影收益
            {name: this.$t('new.doc3'), value: res.data.teamIncome}, // 推荐收益 推广观影收益
            {name: this.$t('new.doc28'), value: res.data.financialIncome}, // 团队收益
          ]
          // let arr = [
          //   {name:this.$t('new.doc2'),value:3}, // 评分收益
          //   {name:this.$t('page.doc75'),value:6}, // 推荐收益
          // ]
          this.data1 = arr
          this.myChartValue1 = arr[0].value
          this.myChartValue2 = arr[1].value
          this.myChartValue3 = arr[2].value
          this.drawLine()
        }
      });
    },

    FontChart(res) {
      //获取到屏幕的宽度
      var clientWidth =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth;
      if (!clientWidth) return; //报错拦截：
      let fontSize = ''
      if (window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
        fontSize = 10 * (clientWidth / 750);
      } else {
        fontSize = 5;
      }
      return res * fontSize;
    },
    drawLine() {
      let that = this
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))

      // 绘制图表
      myChart.setOption({
        // color: ['#FF5C5C','#0FCF91','#0E3C87','#FFD572','#FD95D3'],
        color: ['#ffff00', '#d31733', '#367aff'],
        legend: {
          bottom: '0',
          left: 'center',
          itemWidth: that.FontChart(4.8),
          itemHeight: that.FontChart(2.8),
          itemGap: that.FontChart(2.4),
          textStyle: {
            fontSize: that.FontChart(2.4),
            color: '#666',
          },
          show: false,
        },
        tooltip: {
          padding: [that.FontChart(1.5), that.FontChart(2)],
          trigger: 'item',
          textStyle: {
            color: '#333333',     // 文字的颜色
            fontSize: that.FontChart(2.4),//字体大小
          },
        },

        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            // center: ["50%", "40%"],
            data: that.data1,
            label: {

              fontSize: that.FontChart(2.4),
              color: '#666',
              textBorderColor: '#fff'
            },

          }
        ]
      });
    },


    teamInfo() {
      this.$post(this.URL.income.team, {}).then((res) => {
        if (res.code == 0) {
          this.teamData = res.data;
          let arr = [

            {name: this.$t('new.doc2'), value: res.data.scoreIncome}, // 评分收益 观影收益
            {name: this.$t('new.doc3'), value: res.data.teamIncome}, // 团队收益
            {name: this.$t('new.doc28'), value: res.data.financialIncome}, // 投入理财
          ]
          this.data1 = arr;
          this.myChartValue1 = arr[0].value
          this.myChartValue2 = arr[1].value
          this.myChartValue3 = arr[2].value
          this.drawLine()
        } else {
          this.$toast(res.message);
        }
      });
    },
    teamInfo1() {
      this.$post(this.URL.income.team1, {}).then((res) => {
        if (res.code == 0) {
          this.teamData1 = res.data
        } else {
          this.$toast(res.message);
        }
      });
    },


    path_url(url) {
      this.$router.push({
        path: url,
        query: {}
      });
    },
  },
};
</script>

<style lang="less" scoped>
.invite-wrapper {
  position: relative;
  margin-bottom: 12px;

  img {
    width: 100%;
  }

  .content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 20px 24px;
    box-sizing: border-box;

    .t1 {
      font-size: 20px;
      font-weight: 600;
      color: #06CE64;
    }

    .t2 {
      margin: 10px 0;
      font-size: 14px;
    }

    .yq-button {
      position: absolute;
      padding: 3px 14px;
      border-radius: 0 8px 0 8px;
      background: #02d080;
      font-size: 12px;
    }
  }
}

.team-wrapper {
  position: relative;
  margin-bottom: 12px;
  img {
    width: 100%;
  }

  .title {
    position: absolute;
    top: 26px;
    left: 50%;
    transform: translateX(-50%);
    color: #57F5A1;
    font-size: 16px;
    font-weight: 600;
  }

  .data-wrapper {
    position: absolute;
    display: flex;
    width: 100%;
    left: 0;
    bottom: 15px;
    padding-right: 4px;

    .data-item {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      font-weight: 600;

      .t {
        font-size: 12px;
      }

      .value {
        margin-top: 6px;
        font-size: 17px;
      }
    }
  }
}

.shouyi-wrapper {
  position: relative;
  margin-bottom: 12px;
  img {
    width: 100%;
  }

  .syfx {
    position: absolute;
    top: 20px;
    left: 24px;
    font-size: 16px;
    font-weight: 600;
  }

  .total_revenue {
    position: absolute;
    top: 110px;
    left: 76px;

    .name {
      font-size: 12px;
      margin-bottom: 4px;
    }

    .value {
      font-size: 16px;
      font-weight: 600;
    }
  }

  .data-wrapper {
    position: absolute;
    top: 90px;
    left: 200px;

    .mflex {
      margin-bottom: 15px;
      font-size: 14px;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .b {
      width: 13px;
      height: 13px;
      border-radius: 3px;
      margin-right: 8px;
    }

    .b1 {
      background: #9bec66;
    }

    .value {
      margin-left: 4px;
    }

    .v1 {
      color: #9bec66;
    }
    .v2 {
      color: #00cf6d;
    }
    .v3 {
      color: #fd9153;
    }

    .b2 {
      background: #00cf6d;
    }

    .b3 {
      background: #fd9153;
    }
  }
}

.yaoqing {
  width: 100%;
  margin-bottom: 16px;
}

.page {
  background: #0d2623 url("../../assets/images/promote/bg.png") no-repeat fixed;
  background-size: 100%;
  min-height: 100vh;
  padding-bottom: 60px;
}

.head {
  padding: .32rem 0;
  line-height: .34rem;
  color: var(--COcolor3);
  font-size: .32rem;
  text-align: center;

  img {
    vertical-align: top;
    height: .34rem;
    margin-left: .1rem;
  }

  .s {
    font-size: .28rem;
  }

  .flex {
    align-items: center;
  }
}

.title-1 {
  color: #FFF;
  font-size: 0.26rem;
  font-weight: 400;
}

.bet {
  position: relative;
  height: 125px;
  border: 1px solid #39303d;
  background: url("../../assets/images/promote/tg.png");
  background-size: 100% 100%;
  border-radius: .24rem;
  margin-bottom: 6px;

  .title-tg {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    font-weight: 600;
    color: #12292B;
  }
}

.itemBox {
  padding: 0.24rem;
}

.box2 {
  padding: .24rem 0;
  border: 1px solid #39303d;
  background: linear-gradient(180deg, rgba(62,14,32,1) 0%, rgba(12,11,26,1) 20%);
  border-radius: .24rem;
  .title_my{
    padding: 0 .24rem;
  }
  .title-1 {
    font-weight: 600;
    font-size: .28rem;
  }
}

.box1 {
  margin-top: .32rem;

  li {
    padding-top: .32rem;
    padding-bottom: .22rem;
    margin-bottom: 0;
    background: transparent;

    &:nth-child(2) {
      margin-left: 60px;
      margin-top: 35px;
    }

    &:last-child {
      transform: translateX(-50px);
      margin-top: 35px;
    }

    .am {
      font-size: 14px;
      font-family: Helvetica-Bold, Helvetica;
      font-weight: bold;
      color: #FF801C;
      line-height: .5rem;

      span {
        font-size: 14px;
      }
    }
  }
}
.btn_box{
  margin-top: 0;
  margin-bottom:.32rem ;
}

.btn_box.submit {
  background: url("../../assets/images/public/button2.png");
  background-size: 100% 100%;
  color: #000;
  height: 38px;
  border-radius: 0;
  border: none;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
}

.box3 {
  margin-bottom: 30px;

  .title-box {
    font-family: PingFangSC-Semibold, PingFang SC;
    color: #FFFFFF;
    padding-bottom: .32rem;
    font-size: .28rem;
    display: flex;
    align-items: center;
    .title {
      display: flex;
      align-items: center;
      margin-right: .2rem;
      div{
        margin-left: .1rem;
      }
    }

    .new-add {
      margin-left: auto;
      display: flex;
      align-items: center;
      div{
        margin-left: .1rem;
        color: #0BCA57;
      }
    }

  }

  .team-it1 {

    border-radius: 10px;

    .title {
      padding: .24rem 9px 0;
      color: #000;
    }
  }

  .team-it {
    min-height: 120px;
    margin-top: 12px;
    background: url("../../assets/images/promote/sr.png");
    background-size: 100% 100%;
  }

  .it {
    //background: #fff;
    //border-radius: .2rem;
    //padding: .24rem 9px;

    &:last-child {
      border: 0;
    }

    ul {
      li {
        width: 33.3333%;
        text-align: center;
      }
    }

    .tit {
      display: flex;
      align-items: center;
      color: #fff;
      margin-bottom: 20px;
      font-size: 15px;
      font-weight: 600;
      padding-top: 6px;
      padding-left: 12px;

      img {
        width: 33px;
        margin-right: 8px;
      }
    }

    .s {
      color: #000;
      font-size: 18px;
      font-weight: 600;
      line-height: .45rem;
    }

    .n {
      font-size: .24rem;
      color: #000;
    }
  }
}



.pi {
  background: url("../../assets/images/bg-1.png") no-repeat right center;
  background-size: 100% 100%;
  margin-bottom: .24rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .24rem;

  .left, .right {
    word-break: break-all;
    word-wrap: break-word;
  }

  .left {
    .tit {
      color: rgba(255, 255, 255, 0.6);
      display: flex;
      align-items: center;

      img {
        margin-left: .1rem;
      }
    }

    .pic {
      position: relative;

      .momo {
        position: absolute;
        top: -1.2rem;
        left: -1.3rem;
        padding: 0.12rem;
        background: #343844;
        width: 40vw;
        color: rgba(255, 255, 255, 0.6);;
        font-size: 0.18rem;
        border-radius: 0.1rem
      }
    }

    img {
      height: .3rem;
    }

    .am {
      margin-top: .18rem;
      color: #FFF;
      font-size: 0.24rem;
      font-weight: 600;

      span {
        font-size: 0.36rem;
        font-weight: 600;
      }
    }
  }

  .right {
    border-radius: 0.8rem;
    background: linear-gradient(90deg, #1B5BFF 0%, #C029FF 100%);
    height: 0.56rem;
    flex-shrink: 0;
    padding: 0 .3rem;
    font-size: .24rem;
    align-items: center;
    justify-content: center;
    display: flex;
  }
}

.title-1 {
  line-height: .4rem;
  display: flex;
  //align-items: center;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: var(--COcolor1);
  text-transform: capitalize;
  img {
    height: .4rem;
    margin-right: .08rem;
  }
}

.myChart_but {
  font-size: .28rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: var(--COcolor1);
  border-radius: .44rem;
  padding: .22rem .3rem;
  word-break: break-all;
  word-wrap: break-word;
  line-height: .32rem;

  .top {
    display: flex;
    justify-content: space-between;

    .top-item{
      flex: 0 0 49%;
      display: flex;
    }
  }

  .boot {
    margin-top: .24rem;
    text-align: center;
    display: flex;

    //justify-content: center;
  }
  .color-box{
    flex:0 0 .36rem ;
    height: .24rem;
    border-radius: .06rem;
    margin-right: .1rem;
    &.color-box1{
      background: #ffff00;
    }
    &.color-box2{
      background: #d31733;
    }
    &.color-box3{
      background: #367aff;
    }

  }
  .color-name{
    font-size: .24rem;
    text-align: left;
    line-height: .24rem;
    p{
      margin-top: .12rem;
      font-size: .28rem;
      color: #fff;
      line-height: .28rem;
    }
  }
  // div{
  //   border-right: .02rem solid #22222D;
  //   width: 46%;
  //   text-align: center;
  // }
  // div:last-child{
  //   border-radius: 0rem .44rem .44rem 0rem;
  // }
}

.teamAdd {
  li {
    .s {
      color: #0BCA57;
    }
  }
}
</style>
